<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/bottom.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/account.css">
    <link rel="stylesheet" href="css/my-msg.css">
    <link rel="stylesheet" href="element/index.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="jquery/jquery-3.6.0.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="axios/axios.min.js"></script>
    <script src="js/iconfont.js"></script>
    <script src="js/account.js"></script>

    <style>
        .nav_li .a_text_all:hover {
            color: rgb(255, 128, 0);
        }

        .operation_li .a_text_all:hover {
            color: rgb(255, 128, 0);
        }

        .operation_li .a_text_all {
            color: rgb(0, 0, 0);
        }

        .nav_li .a_text_all {
            color: rgb(0, 0, 0);
        }
    </style>
</head>

<body style="background-color: rgb(240, 240, 240);overflow-x: hidden">
    <div id="app">
        <div class="head_max" style="background-color: white;">
            <!-- 小的盒子 -->
            <div class="head_min">
                <!-- 头部logo -->
                <div class="head_logo"></div>
                <!-- 导航条 -->
                <div class="navigation_bars">
                    <div class="nav_top">
                        <ul class="ul1">
                            <li class="operation_li" v-if="userInfo.length!=0">
                                <a href="myaccount_Myorder.html" class="a_text_all">你好,{{userInfo.user_name}}</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="operation_li" v-else>
                                <a class="a_text_all a-out-login">登录</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="operation_li">
                                <a href="#" class="a_text_all" @click="openFullScreen1"
                                    v-loading.fullscreen.lock="fullscreenLoading">退出</a>
                                <span class="operation_span">|</span>
                            </li>
                            <li class="ul2-li li">
                                <a href="#" class="a_text_all">Language</a>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li class="li ul3-li">
                                <a href="#">CNY</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 4px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                                <span>|</span>
                            </li>
                            <li> <a href="#">常见问题</a> <span>|</span> </li>
                            <li class="ul4-li">
                                <img src="image/head/phone2.svg" width="13">
                                <a href="#">APP客户端</a>
                                <span>|</span>
                            </li>
                            <li>
                                <img src="image/head/phone.svg" width="15">
                                <a href="#" style="color:#ff8000; font-style: oblique;font-size: 14px;">400-9600-080</a>
                            </li>

                        </ul>
                        <!-- 二级菜单 -->
                        <ul class="ul2">
                            <li><a href="#">English</a></li>
                            <li><a href="#">繁體中文</a></li>
                            <li><a href="#">简体中文</a></li>
                            <li style="border: 0;"><a href="#">日本语</a></li>
                        </ul>
                        <ul class="ul3">
                            <li><a href="#">CNY</a></li>
                            <li><a href="#">USD</a></li>
                            <li><a href="#">HKD</a></li>
                            <li style="border: 0;"><a href="#">JPY</a></li>
                        </ul>
                        <div class="ul4">
                            <div class="download-1">APP预订，即时简单快捷</div>
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="nav_bottom">
                        <ul>
                            <li> <a href="index.html" style="color: #ff8000;">首页</a></li>
                            <li class="li" id="nav_villa">
                                <a href="#" class="a_text_all" id="a_villa">别墅公寓</a>
                                <svg class="icon" aria-hidden="true" style="margin-top: 6px; font-size: 12px;">
                                    <use xlink:href="#icon-daosanjiao"></use>
                                </svg>
                            </li>
                            <li> <a href="hotel.html">甄选酒店</a></li>
                            <div class="new"></div>
                            <li> <a href="private.html">私享小团</a></li>
                            <li> <a href="#">限时优惠</a></li>
                            <li> <a href="single.html">晒单</a></li>
                            <li> <a href="vacation_tips.html">度假攻略</a></li>
                            <li> <a href="vvip.html">VVIP</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="bodyBox">
            <div class="bodyBox-left">
                <div class="bodyBox-left-top">
                    <div>
                        <img :src="'image/head/'+userInfo.user_head" alt="">
                    </div>
                    <span>{{userInfo.user_name}}</span>
                    <div>
                        <a href="">编辑资料</a>
                        <a href="">修改密码</a>
                    </div>
                </div>
                <div class="bodyBox-left-bottom">
                    <ul>
                        <li>
                            <a href="myaccount_Myorder.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M10 6C10 4.89543 10.8954 4 12 4H36C37.1046 4 38 4.89543 38 6V44L31 39L24 44L17 39L10 44V6Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M18 22L30 22" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M18 30L30 30" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M18 14L30 14" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                </svg>
                                <span>我的订单</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_Mycoupon.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M4 19.313V9H44V19.313C41.8815 20.068 40.3636 22.1053 40.3636 24.5C40.3636 26.8947 41.8815 28.932 44 29.687V40H4V29.687C6.11853 28.932 7.63636 26.8947 7.63636 24.5C7.63636 22.1053 6.11853 20.068 4 19.313Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linejoin="round" />
                                    <path d="M19 16L24 21L29 16" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" stroke-linejoin="round" />
                                    <path d="M18 22H30" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M18 28.1667H30" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M24 22V34" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                </svg>
                                <span>我的优惠券</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_collection.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="48" height="48" fill="white" fill-opacity="0.01" />
                                    <path
                                        d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                </svg>
                                <span>我的收藏单</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_strategy.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5 7H16C20.4183 7 24 10.5817 24 15V42C24 38.6863 21.3137 36 18 36H5V7Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linejoin="round" />
                                    <path d="M43 7H32C27.5817 7 24 10.5817 24 15V42C24 38.6863 26.6863 36 30 36H43V7Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linejoin="round" />
                                </svg>
                                <span>我的旅游攻略</span>
                            </a>
                        </li>
                        <li id="style1">
                            <a href="my-msg.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M5.00372 42.2311C5.00372 42.6557 5.35807 42.9999 5.79521 42.9999L42.2023 43C42.6394 43 42.9938 42.6558 42.9938 42.2313V41.3131C43.012 41.0364 43.049 39.6555 42.1388 38.1289C41.5648 37.1663 40.7318 36.3347 39.6628 35.6573C38.3696 34.8378 36.7245 34.244 34.7347 33.8865C34.72 33.8846 33.2446 33.689 31.7331 33.303C29.101 32.6307 28.8709 32.0357 28.8694 32.0299C28.8539 31.9711 28.8315 31.9146 28.8028 31.8615C28.7813 31.7505 28.7281 31.3328 28.8298 30.2136C29.088 27.371 30.6128 25.691 31.838 24.3412C32.2244 23.9155 32.5893 23.5134 32.8704 23.1191C34.0827 21.4181 34.1952 19.4839 34.2003 19.364C34.2003 19.1211 34.1724 18.9214 34.1127 18.7363C33.9937 18.3659 33.7698 18.1351 33.6063 17.9666L33.6052 17.9654C33.564 17.923 33.5251 17.8828 33.4933 17.8459C33.4812 17.8318 33.449 17.7945 33.4783 17.603C33.5859 16.8981 33.6505 16.3079 33.6815 15.7456C33.7367 14.7438 33.7798 13.2456 33.5214 11.7875C33.4895 11.5385 33.4347 11.2755 33.3494 10.9622C33.0764 9.95814 32.6378 9.09971 32.0284 8.39124C31.9236 8.27722 29.3756 5.5928 21.9788 5.04201C20.956 4.96586 19.9449 5.00688 18.9496 5.05775C18.7097 5.06961 18.3812 5.08589 18.0738 5.16554C17.3101 5.36337 17.1063 5.84743 17.0528 6.11834C16.9641 6.56708 17.12 6.91615 17.2231 7.14718L17.2231 7.1472L17.2231 7.14723C17.2381 7.18072 17.2566 7.22213 17.2243 7.32997C17.0526 7.59588 16.7825 7.83561 16.5071 8.06273C16.4275 8.13038 14.5727 9.72968 14.4707 11.8189C14.1957 13.4078 14.2165 15.8834 14.5417 17.5944C14.5606 17.6889 14.5885 17.8288 14.5432 17.9233L14.5432 17.9233C14.1935 18.2367 13.7971 18.5919 13.7981 19.4024C13.8023 19.4839 13.9148 21.4181 15.1272 23.1191C15.408 23.5131 15.7726 23.9149 16.1587 24.3403L16.1596 24.3412L16.1596 24.3413C17.3848 25.6911 18.9095 27.371 19.1678 30.2135C19.2694 31.3327 19.2162 31.7505 19.1947 31.8614C19.166 31.9145 19.1436 31.971 19.1282 32.0298C19.1266 32.0356 18.8974 32.6287 16.2772 33.2996C14.7656 33.6867 13.2775 33.8845 13.2331 33.8909C11.2994 34.2173 9.66438 34.7963 8.37351 35.6115C7.30813 36.2844 6.47354 37.1175 5.89289 38.0877C4.96517 39.6379 4.99025 41.0497 5.00372 41.3074V42.2311Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linejoin="round" />
                                </svg>
                                <span style="color: #ff8000;">我的资料</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_information.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M4 8H11C11 8 12 13 17 13C22 13 23 8 23 8H44V40H23C23 40 22 35 17 35C12 35 11 40 11 40H4V8Z"
                                        fill="none" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M17 19V21" stroke="#929292" stroke-width="4" stroke-linecap="square" />
                                    <path d="M17 27L17 29" stroke="#929292" stroke-width="4" stroke-linecap="square" />
                                    <path d="M25 21H36" stroke="#929292" stroke-width="4" stroke-linecap="square" />
                                    <path d="M25 27H36" stroke="#929292" stroke-width="4" stroke-linecap="square" />
                                </svg>
                                <span>发票信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_housing.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="48" height="48" fill="white" fill-opacity="0.01" />
                                    <path d="M4 18H44L24 6L4 18Z" fill="none" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" stroke-linejoin="round" />
                                    <path d="M44 42L4 42" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M9 18V42" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M19 18V42" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M29 18V42" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M39 18V42" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                </svg>
                                <span>我的房源</span>
                            </a>
                        </li>
                        <li >
                            <a href="myaccount_Cashback.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M39 4H9V10L24 14L39 10V4Z" fill="none" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" stroke-linejoin="round" />
                                    <path d="M39 17V44H9V17" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M19 19L24 25L29 19" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" stroke-linejoin="round" />
                                    <path d="M18 31H30" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M18 25H30" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M24 25V37" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                </svg>
                                <span>邀请反现</span>
                            </a>
                        </li>
                        <li>
                            <a href="myaccount_customized.html">
                                <?xml version="1.0" encoding="UTF-8"?><svg width="25" height="25" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect width="48" height="48" fill="white" fill-opacity="0.01" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
                                        stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M24 34C29.5228 34 34 29.5228 34 24C34 18.4772 29.5228 14 24 14C18.4772 14 14 18.4772 14 24C14 29.5228 18.4772 34 24 34Z"
                                        stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M24 4V44" stroke="#929292" stroke-width="4" stroke-linecap="square"
                                        stroke-linejoin="round" />
                                    <path d="M4 24L18 24.0083" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" />
                                    <path d="M4 24.0083L44 24.0083" stroke="#929292" stroke-width="4"
                                        stroke-linecap="square" stroke-linejoin="round" />
                                </svg>
                                <span>我的定制</span>
                            </a>
                        </li>
                        <a @click="addAf" style="cursor:pointer;" id="addAf">添加新房源</a>
                    </ul>
                </div>
            </div>
            <div class="bodyBox-right">
                <div id="big-my-msg">
                    <div id="my-msg-box">
                        <div class="msg-title">
                            <div class="title-box">
                                <img src="./image/my-msg/my_msg1.svg" alt="">
                                <span class="title-span1">如需帮助或其他服务，请致电<span>400-9600-080</span> </span>
                            </div>
                        </div>
                        <div class="people-xx">
                            <div class="people-xx-box">
                                <span>个人信息</span>
                            </div>
                        </div>
                        <div class="msg-content">
                            <div class="msg-content-box">
                                <div class="msg-div1">
                                    <span>姓名:</span>
                                    <p class="shh">{{userInfo.user_name}}</p>
                                    <input type="text" class="msg-inp msg-name" :value="userInfo.user_name">
                                </div>
                                <div class="msg-div3">
                                    <span>性别:</span>
                                    <p class="shh">{{userInfo.user_sex}}</p>
                                    <input type="radio" name="msg-sex" id="msg-sex-boy"  :value="userInfo.user_sex" v-model="userInfo.user_sex">
                                    <label class="sex-boy-lab" for="msg-sex-boy">男</label>
                                    <input type="radio" name="msg-sex" id="msg-sex-gril" :value="userInfo.user_sex" v-model="userInfo.user_sex">
                                    <label class="sex-gril-lab" for="msg-sex-gril">女</label>
                                </div>
                                <div class="msg-div4">
                                    <span class="msg-div4-span">*<span>邮箱:</span></span>
                                    <p class="shh">{{userInfo.user_email}}</p>
                                    <input type="email" class="msg-email" :value="userInfo.user_email">
                                    
                                </div>
                                <div class="msg-div4">
                                    <span class="msg-span-year">年龄:</span>
                                    <p class="shh">{{userInfo.user_age}}</p>
                                    <input type="text" class="msg-year" :value="userInfo.user_age">
                                </div>
                                <div class="msg-div4">
                                    <span class="msg-span-year">手机:</span>
                                    <p class="shh">{{userInfo.user_phone}}</p>
                                    <input type="text" class="msg-phone" :value="userInfo.user_phone">
                                </div>
                                <div class="msg-div5">
                                    <div class="msg-card-num" >
                                        <span class="zjh">证件号:</span>
                                        <p class="shh">{{userInfo.user_card}}</p>
                                        <input type="text" class="msg-card" :value="userInfo.user_card">
                                    </div>
                                </div>
                                <div class="msg-btn-go">
                                    <button class="msg-update">修改</button>
                                    <button class="msg-cnacel">取消</button>
                                    <button class="msg-keep">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="bottom_box">
                <div class="bottom_details">
                    <a href="">
                        <div class="img_Logo"></div>
                    </a>
                    <div class="bottom_text">
                        第六感-别墅公寓、奢华酒店、私人定制。我们推崇与众不同的度假理念，提供包括度假别墅、短租公寓和奢华酒店在内的多元化住宿选择，另有私人包机，行程定制，豪华游轮等预订服务。
                        第六感致力于满足您的个性化需求，为您提供专业的一站式度假服务。
                    </div>
                    <ul class="ul_css bottom_ul">
                        <li class="bottom_li">
                            <div class="bottom_ico_vx"></div>
                            <p class="bottom_p_css bottom_text">微信订阅号</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_blog"></div>
                            <p class="bottom_p_css bottom_text">官方微博</p>
                        </li>
                        <li class="bottom_li">
                            <div class="bottom_ico_tmallx"></div>
                            <p class="bottom_p_css bottom_text">官方天猫</p>
                        </li>
                    </ul>
                </div>
                <div class="bottom_service">

                    <div class="service_box">
                        <div class="service_ico_box">
                            <div class="service_phone_ico">
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">400-9600-080</span>
                                <p class="bottom_text">7x24 小时在线服务</p>
                            </div>
                            <div class="service_message_ico"></div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">服务支持</span>
                                <p class="bottom_text">Rookie团队</p>
                            </div>
                        </div>
                        <div class="service_ico_box">
                            <div class="service_text_box">
                                <span class="bottom_text service_text">市场合作</span>
                                <p class="bottom_text">marketing@Rookie.com</p>
                            </div>
                            <div class="service_text_box">
                                <span class="bottom_text service_text">房源合作</span>
                                <p class="bottom_text">partnership@Rookie.com</p>
                            </div>
                        </div>
                        <ul class="ul_css" style="float:left;margin-top: 13px;">
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">关于团队</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">常见问题</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">服务理念</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">网站地图</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">加入我们</span>
                                </a>
                            </li>
                            <li class="service_li">
                                <a href="" class="a_text_all">
                                    <span style="color: #777">同行注册</span>
                                </a>
                            </li>
                        </ul>
                        <div class="service_reserve_box">
                            <div class="reserve_img"></div>
                            <p class="bottom_text reserve_text">APP预订，即时简单快捷</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="business_license">
                <div class="bottom_box">
                    <div class="business_license_text">Copyright © 2013-2022 上海墅假网络科技有限公司 沪ICP备14011210号 营业执照</div>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="js/api.js"></script>
<script src="js/head.js"></script>
<script src="./element/index.js"></script>
<script src="js/my-msg.js"></script>
</html>